<template xmlns="http://www.w3.org/1999/html">
    <div class="buttonWrapper">
        <div id="DSandDJ" @click="open('DSandDJ')">
            <KindofButton :kindof="{color:'#2dff01',text:'单锁|解',}"></KindofButton>
            <div class="title">单锁|解</div>
        </div>
        <div id="QJ">
            <KindofButton @click="canclerouter" :kindof="{color:'#00fe74',text:'取消进路',}"></KindofButton>
            <div class="title">取消进路按钮</div>
        </div>
        <div id="DC" @click="DC">
            <KindofButton :kindof="{color:'#f7f786',text:'定操',}"></KindofButton>
            <div class="title">定操按钮</div>
        </div>
        <div id="FC" @click="FC">
            <KindofButton :kindof="{color:'#b7b8b7',text:'反操',}"></KindofButton>
            <div class="title">反操按钮</div>
        </div>
        <div id="GJ">
            <KindofButton :kindof="{color:'#ff9d00',text:'GJ',}"></KindofButton>
            <div class="title">GJ按钮</div>
        </div>
        <div id="MD" @click="open('MD')">
            <KindofButton :kindof="{color:'#b2f6a3',text:'灭灯',}"></KindofButton>
            <div class="title">灭灯按钮</div>
        </div>
        <div id="YX" @click="open('YX')">
            <KindofButton :kindof="{color:'#ea1414',text:'引导信号',}"></KindofButton>
            <div class="title">引导信号按钮</div>
        </div>
        <div id="DS">
            <KindofButton :kindof="{color:'#f8a6f1',text:'道岔随机',}"></KindofButton>
            <div class="title">道岔随机随机</div>
        </div>
        <div id="JS">
            <KindofButton :kindof="{color:'#86b7f7',text:'紧停随机',}"></KindofButton>
            <div class="title">紧停随机按钮</div>
        </div>
        <div @click="reset">
            <KindofButton :kindof="{color:'#8b97f7',text:'直接复位',}"></KindofButton>
            <div class="title">直接复位</div>
        </div>
    </div>
    <!--弹出框-->
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
    >
        <!--单锁?单解-->
        <div v-if="current_model==='DSandDJ'">
            <el-checkbox-group v-model="rep[0].value">
                <el-checkbox label="SW06I"/>
                <el-checkbox label="SW08I"/>
                <el-checkbox label="SW04I" disabled/>
                <el-checkbox label="SW02I" disabled/>
            </el-checkbox-group>
        </div>
        <!--定操-->
        <div v-if="current_model==='DC'">
            <el-checkbox-group v-model="rep[2].value">
                <el-checkbox label="SW06I"/>
                <el-checkbox label="SW08I"/>
                <el-checkbox label="SW04I" disabled/>
                <el-checkbox label="SW02I" disabled/>
            </el-checkbox-group>
        </div>
        <!--反操-->
        <div v-if="current_model==='FC'">
            <el-checkbox-group v-model="rep[3].value">
                <el-checkbox label="SW06I"/>
                <el-checkbox label="SW08I"/>
                <el-checkbox label="SW04I" disabled/>
                <el-checkbox label="SW02I" disabled/>
            </el-checkbox-group>
        </div>
        <!--灭灯-->
        <div v-if="current_model==='MD'">
            <el-checkbox-group v-model="rep[4].value">
                <el-checkbox label="X20I"/>
                <el-checkbox label="X26I"/>
                <el-checkbox label="X24I"/>
                <el-checkbox label="X06I" disabled/>
                <el-checkbox label="X07I" disabled/>
                <el-checkbox label="X18I" disabled/>
                <el-checkbox label="X22I" disabled/>
                <el-checkbox label="X09I" disabled/>
            </el-checkbox-group>
        </div>
        <!--引导信号-->
        <div v-if="current_model==='YX'">
            <el-checkbox-group v-model="rep[5].value">
                <el-checkbox label="X20I"/>
                <el-checkbox label="X26I"/>
                <el-checkbox label="X24I"/>
                <el-checkbox label="X06I" disabled/>
                <el-checkbox label="X07I" disabled/>
                <el-checkbox label="X18I" disabled/>
                <el-checkbox label="X22I" disabled/>
                <el-checkbox label="X09I" disabled/>
            </el-checkbox-group>
        </div>
        <template #footer>
                <span class="dialog-footer">
                     <el-button @click="dialogVisible = false">Cancel</el-button>
                     <el-button type="primary" @click="submit">Confirm</el-button>
                </span>
        </template>
    </el-dialog>
</template>

<script setup>
import stopButton from '@/components/custombutton/stopButton.vue'
import AllChoiceButton from "@/components/custombutton/allChoiceButton.vue";
import keyButton from "@/components/custombutton/keyButton.vue";
import KindofButton from '@/components/custombutton/KindofButton.vue'
import bus from "vue3-eventbus";
import {getCurrentInstance, reactive, ref} from "vue";
import {useStore} from "vuex";
import {ElMessage, ElMessageBox} from "element-plus";


const store = useStore();

components:{
    stopButton, AllChoiceButton, keyButton, KindofButton
}
;
let ws = getCurrentInstance().proxy.$ws;

//复位
function reset() {
    bus.emit('reset');
}

//目前不知道发什么命令
// function listener(e) {
//     let id = e.path[2].getAttribute('id');
//     if (id === null) {
//         ElMessage({
//             showClose: true,
//             message: '不要点边界点中间白色区域!',
//             type: 'warning',
//         });
//     } else {
//         //不进行任何操作
//     }
// }


const dialogVisible = ref(false)
//弹出框有7种模式
const mode = reactive(['DSandDJ','QJ', 'DC', 'FC', 'MD', 'YX'])
//点击以后选择当前模式
const current_model = ref('')
let rep = reactive([
    {name:'DSandDJ',value:[]},
    {name:'QJ',value:[]},
    {name:'DC',value:[]},
    {name:'FC',value:[]},
    {name:'MD',value:[]},
    {name:'YX',value:[]},
])
//open
function open(id){
    dialogVisible.value = true
    current_model.value = id
}
//提交按钮
function submit(){
    if(current_model.value === 'DSandDJ'){
        bus.emit('DSandDJ',rep[0].value)
    }else if(current_model.value === 'YX'){
        bus.emit('YX',rep[5].value)
    }
    dialogVisible.value = false
}
//取消进路
function canclerouter(){
    bus.emit('canclerouter',false)
}
//定操
function DC(){
    bus.emit('DC',true)
}
//反操
function FC(){
    bus.emit('FC',false)
}

</script>

<style scoped lang="scss">
.buttonWrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;

    .title {
        color: #ffffff;
        text-align: center;
    }
}

</style>
